<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <link rel="stylesheet" href="../css/railView.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>

    <!--需要使用initControlModelTreeButton方法时才引入modelTree.js和jquery-2.1.4.min.js-->
    <script type="text/javascript" src="../../../railView/libs/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../../../railView/libs/modelTree.js"></script>
    <style>
        .animation-ui {
            position: absolute; 
            bottom: 0;
            height: 300px;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: #fff;
            color: #6b6b6b;
        }
      </style>
</head>
<body>   
    <div id="buttom-container">
        <button class="button" type="button" id="play" onclick="handlePlay()">播放</button>
        <button class="button" onclick="handlePause()">暂停</button>
        <button class="button" onclick="handleStop()">停止</button>
    </div>
    <div id="left" style="width: 100%; height: 100%; position: relative;"></div>
    <div class="animation-ui" id="animationDiv"></div>
</body>
<script id="viewerStartup">
    var tk,animationOperator
    window.onload = function () {
        var proleft = new CarsView("left", 'csr', elevator, callbackleft, {

        });
        proleft.then(function (value) {
            tk = value;
            // tk.initControlModelTreeButton()
        });
    };
    function callbackleft(nodeNames, nodeIds, position, center, normal) {}
    function isShow () {
        let timeScaleChartOptions = {
            backgroundColor: "#fff",
            labelColor: "#a12929",
            lineColors: ["#00923f", "#a12929"],
            chooseImg: "",
            chooseIndex: 5,
            times: 15
        }
        const res = tk.initAnimationPanel('animationDiv', timeScaleChartOptions)
    }
    // 播放
    function handlePlay () {
        const camera = {
            _height: 4741.245702616422,
            _nearLimit: 0.01,
            _position: {
                x: -5840.018688091468, 
                y: -3038.210892539939, 
                z: -5076.488128532155
            },
            _projection: 0,
            _target: {
                x: -1157.2101668620016, 
                y: -3062.9615691625677, 
                z: -5818.177869565165
            },
            _up: {
                x: 0.15643383169109618, 
                y: -0.0003498070961830016, 
                z: 0.9876883789624323
            },
            _width: 4741.245702616422
        }
        setTimeout(() => {
            tk.locationSolids([136], 2000, 4)
        }, 2000)
        tk.setViewPoint(camera, 1000)
        $.getJSON('../data/Animation.json', function (file) {
            tk.initAnimationOperator(true).then(result => {
                animationOperator = result
                document.getElementById('play').disabled = true
                // animationOperator即为动画操作器，可在此执行初始化操作器后需要执行的逻辑
                tk.importAnimation(animationOperator, new Blob([JSON.stringify(file)], {TYPE: "application/json"}), true).then(res => {
                    tk.playAnimation(animationOperator, true, 1)
                })
            })
        })
    }
    // 暂停
    function handlePause () {
        document.getElementById('play').disabled = false
        tk.pauseAnimation(animationOperator)
    }
    // 停止
    function handleStop () {
        document.getElementById('play').disabled = false
        tk.stopAnimation(animationOperator)
    }
</script>
</html>
